<template>
<div>
  <div >
    <img src="../assets/e196aaa.jpg" style="height: 120px;width: 100%">
    <div style="position: relative;top: -50px;z-index: 100;text-align: left;margin-right: 12%;margin-left: 12%">
      <img :src="teacher.avatar" width="84px" height="84px" style=" border-radius:50%; position: relative ; display: inline-block ">
      <h3 style="font-weight:bold;font-family: 'Berlin Sans FB Demi';font-size: 20px;display: inline-block;position: relative;top: -50px;margin-left: 30px;color: #f2f2f2">{{teacher.name}}</h3>
      <p style="color: #999999;font-size: 18px;display: inline-block">{{teacher.intro}}</p>
    </div>

  </div>
  <div class="big_img">
    <ul>
      <li v-for="(items,index)  in courses" @click="tiaozhuan(items.id)" :ref='items.title+index' @mouseleave="bianxiao(items.title+index)"  @mouseenter="bianda(items.title+index)">
        <a @click="tiaozhuan(items.id)">
          <div class="kechengs">
            <img :src="items.cover" class="zhanshiimg">
            <span style="text-align: left">{{ items.title }}</span><br/>
            <span style="text-align: left">${{ items.price }}</span>
          </div>
        </a>
      </li>
    </ul>
  </div>
</div>
</template>

<script>
export default {
  name: "teacherOne",
  data(){
    return{
      //讲师信息
      teacher:{},
      //讲师id
      tid:1,
      //课程信息
      courses:[],
      //课程总数
      count:"",
    }
  },
  created() {
    console.log(this.$route.query);
    this.tid=this.$route.query.id
    console.log(this.tid)
    this.init()
  },
  methods:{
    tiaozhuan(id) {
      this.$router.push({
        path:'/courseDetails',
        query:{
          key:id
        }
      })
    },
    bianxiao(item){
      var a =this.$refs[item][0].children[0]
      a.className=""
    },
    bianda(item){
      var a =this.$refs[item][0].children[0]
      a.className="yinying"
    },

    init(){
      var that = this;
      //查询老师下边所有课程
      this.$http.get("/core/teacherandcou/findteacherandcoursesandcount?id="+this.tid).then(function (resp){
        console.log(resp);
        var da= resp.data.result;
        that.teacher=da.teacher;
        that.courses=da.courses;
        that.count=da.count;
      })
    }
  },
}
</script>

<style scoped>
.yinying{
  position: relative;

  top: -3px;

}
#bai{
  background: #F5F5F5 ;
}
#daohang {

  width: 200px;
  z-index: 1000;
  position: relative;
  top: -399px;
  left: 12%;
  height: 399px;

}

.el-cascader-panel {
  background: white;
}

#lunbo {
  height: 400px;
}

#big {
  background: rgb(228, 228, 228);
}

#big_ttt {
  background: #E4E4E4;
}

.hotcontext {
  margin-left: 12%;
  margin-right: 12%;
  margin-top: 30px;

}

.hotcontext:after {
  clear: both;
  content: "";
  width: 0;
  height: 10px;
  display: block;
  visibility: hidden;
}

.context {

  margin-left: 12%;
  margin-right: 12%;
  margin-top: 30px;
  padding-bottom: 20px;
}

.context:after {
  clear: both;
  content: "";
  width: 0;
  height: 0;
  display: block;
  visibility: hidden;
}

.big_con_lin1 {
  display: inline;
  float: left;

}
a{ text-decoration:none}

.big_con_lin2 {
  display: inline;
  float: right;
}

.big_img > ul > li {
  width: 20%;
  height: 204px;
  margin-bottom: 20px;
  border-radius: 9px;
}

.kechengs {
  width: 90%;
  margin: auto;
  padding: 0px;
  background: #FFFFFF;
  border-radius: 9px;
}

.el-menu {
  width: 200px;
  height: 100%;
  z-index: 100
}

.zhanshiimg {
  width: 100%;
  height: 140px;
}

ul {
  list-style: none;
  padding: 0px;
}

.big_img > ul > li {
  float: left;
}

.big_img{
  margin-top: 50px;
  margin-left: 12%;
  margin-right: 12%;
}

.big_img > ul:after {
  clear: both;
  content: "";
  width: 0;
  height: 0;
  display: block;
  visibility: hidden;
}

.kechengs > img {
  border-radius: 8px 8px 0px 0px;
}

.zi_div3 > ul:after{content:"";display:block;clear:both;}

.zi_div3 > ul > li {
  color: #909399;
  font-size: 16px;
  float: left;
  padding-left: 10px;
  margin-top: -8px;
  padding-bottom: 5px;
}

.zi_div2 {
  font-size: 15px;
  padding-bottom: 15px;

}

#zi > ul:after {
  clear: both;
  content: "";
  width: 0;
  height: 0;
  display: block;
  visibility: hidden;
}

#zi > ul > li {
  text-align: center
}

#zi {
  position: absolute;
  left: 200px;
  top: 0px;
  width: 280px;
  background: white;
  height: 400px;

}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#caidan {
  width: 200px;
  height: 100%;
  background: black;
  opacity: 0.65

}

.caidan_li {
  width: 100%;
  height: 20%;

}

.caidan_big {
  color: white;
  padding-top: 26px;
  justify-content: space-between;
}

.caidan_big:after {
  clear: both;
  content: "";
  width: 0;
  height: 0;
  display: block;
  visibility: hidden;
}
</style>